<template>
  <div class="footer">
    <div class="Logo">
      <img src="../public/imgs/logo-footer.png" alt="" />
      <h4>小米商城</h4>
    </div>
    <div class="listBox">
      <ul class="list" v-for="item in footList" :key="item">
        <li>{{ item }}</li>
      </ul>
    </div>
    <div class="tips">
      © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号
      京网文[2020]0276-042号
    </div>
  </div>
</template>

<script>
export default {
  name: "NavFooter",
  data() {
    return {
      footList: [
        "小米商城",
        "MIUI",
        "米家",
        "米聊",
        "多看",
        "游戏",
        "政企服务",
        "小米天猫店",
      ],
    };
  },
};
</script>

<style>
.footer {
  height: 260px;
  background: black;
  color: #837d71;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.logo {
  padding: 20px;
}
.listBox {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list {
  list-style: none;
  float: left;
}
.list > li {
  /* float: left; */
  padding: 0 10px;
  border-right: 1px solid gray;
}
.list > li:last-child {
  /* float: left; */
  padding: 0 10px;
  /* border-right: none; */
}
.Logo > img {
  width: 60px;
}
.tips {
  clear: both;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
</style>